<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>请输入字符，当2s内无输入时，框内输入值将转为大写</h2>
<input type="text" id="input-content">
<p class="status">输入中......</p>

<script>
    function debounce(func,delay){//防抖+闭包
        let timer=null;//定时器
        return function(){
            const context=this;
            const args=arguments;

            if(timer){
                clearTimeout(timer);
            }

            timer=setTimeout(()=>{
                func.apply(context,args);
            },delay);
        };
    }

    function handleInput(){
        this.value=this.value.toUpperCase();
        document.querySelector('.status').textContent="已自动转为大写";
    }

    const input=document.getElementById('input-content');
    const debouncedInput=debounce(handleInput,2000);

    input.addEventListener('input',function(){
        document.querySelector('.status').textContent="输入中......";
        debouncedInput.call(this);
    });
</script>
</body>
</html>